<template>
  <el-button type="primary" @click="handlePreview">预览</el-button>
  <el-dialog v-model="dialogVisible" title="预览" width="800" align-center :append-to-body="true">
    <div v-html="props.content" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue"
const props = defineProps({
  content: String
})
const dialogVisible = ref<boolean>(false)

const handlePreview = () => {
  dialogVisible.value = true
}
</script>
